<template>
	<view class="" :style="{ padding: '0rpx '+ value.padding * 2 + 'rpx' }">
		<template v-if="styleValue == 1 || styleValue == 2">
			<view class="goods-list" :class="styleValue == 1 ? 'single-column' : 'double-column'"
				:data-theme="themeStyle"
				:style="{ backgroundColor: value.backgroundColor, marginTop: value.marginTop * 2 + 'rpx' }">
				<view class="goods-item" v-for="(item, index) in goodsList" :key="index" @click="toDetail(item)">
					<view class="goods-img">
						<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)"></image>
						<view class="color-base-bg goods-tag"
							v-if="value.goodsTag == 'default' && goodsTag(item) != ''">{{ goodsTag(item) }}</view>
						<view class="goods-tag-img" v-if="value.goodsTag == 'diy'">
							<image :src="$util.img(value.tagImg.imageUrl)" mode=""></image>
						</view>
					</view>
					<view class="info-wrap">
						<view class="name-wrap">
							<view class="goods-name">{{ item.goods_name }}</view>
						</view>
						<view class="pro-info">
							<view class="delete-price font-size-activity-tag color-tip">
								<block>
									<text class="unit">{{ $lang('common.currencySymbol') }}</text>
									{{ item.market_price > 0 ? item.market_price : item.price }}
								</block>
							</view>
							<view v-if="value.isShowGoodSaleNum" class="sale font-size-activity-tag color-tip">
								已售{{ item.sale_num }}{{ item.unit ? item.unit : '件' }}</view>
						</view>
						<view class="lineheight-clear">
							<view class="discount-price">
								<text
									class="unit color-base-text font-size-tag">{{ $lang('common.currencySymbol') }}</text>
								<text class="price color-base-text font-size-toolbar">{{ showPrice(item) }}</text>
							</view>
							<view class="member-price-tag"
								v-if="item.member_price && item.member_price == showPrice(item)">
								<image :src="$util.img('upload/uniapp/index/VIP.png')" mode="widthFix"></image>
							</view>
							<view class="member-price-tag" v-else-if="item.promotion_type == 1">
								<image :src="$util.img('upload/uniapp/index/discount.png')" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>

		<template v-if="styleValue == 3">
			<view class="goods-list" :data-theme="themeStyle"
				:style="{ backgroundColor: value.backgroundColor, marginTop: value.marginTop * 2 + 'rpx' }">
				<view class="goods-list-3">
					<view class="goods-item" v-for="(item, index) in goodsList" :key="index" @click="toDetail(item)">
						<view class="goods-img">
							<image :src="goodsImg(item.goods_image)" mode="aspectFill" @error="imgError(index)"
								:lazy-load="true"></image>
							<view class="goods-tag"
								:style="{'background': 'url(' + bgImg + ') no-repeat', 'backgroundSize': 'cover'}"
								v-if="value.goodsTag == 'default' && goodsTag(item) != ''">{{ goodsTag(item) }}</view>
							<view class="goods-tag-img" v-if="value.goodsTag == 'diy'">
								<image :src="$util.img(value.tagImg.imageUrl)" mode=""></image>
							</view>
							<view class="bg"></view>
							<view v-if="value.isShowGoodSaleNum" class="num">
								已售{{ item.sale_num }}{{ item.unit ? item.unit : '件' }}</view>
						</view>
						<view class="info-wrap">
							<view class="name-wrap">
								<view class="goods-name">{{ item.goods_name }}</view>
							</view>
							<view class="pro-info">
								<view class="lineheight-clear">
									<view class="discount-price">
										<text
											class="unit color-base-text font-size-tag">{{ $lang('common.currencySymbol') }}</text>
										<text
											class="price color-base-text font-size-toolbar">{{ showPrice(item) }}</text>
									</view>
									<view class="member-price-tag"
										v-if="item.member_price && item.member_price == showPrice(item)">
										<image :src="$util.img('upload/uniapp/goods/vip.png')" mode="widthFix"></image>
									</view>
								</view>

								<view class="delete-price font-size-activity-tag color-tip">
									<block>
										<text class="unit">{{ $lang('common.currencySymbol') }}</text>
										{{ item.market_price > 0 ? item.market_price : item.price }}
									</block>
								</view>
							</view>

							<view class="label">
								<view v-if="item.is_free_shipping == 1">包邮</view>
								<view
									v-if="item.promotion_type == 1 && (!item.member_price || item.member_price != showPrice(item) )">
									限时折扣</view>
							</view>

							<button class="btn color-base-bg">立即购买</button>
						</view>
					</view>
				</view>
			</view>
		</template>

		<template v-if="styleValue == 4">
			<view class="goods-list" :data-theme="themeStyle"
				:style="{ backgroundColor: value.backgroundColor, marginTop: value.marginTop * 2 + 'rpx' }">
				<view class="goods-list-3 goods-list-4" v-show="goodsList.length > 0">
					<view class="goods-item" v-for="(item, index) in goodsList" :key="index" @click="toDetail(item)">
						<view class="goods-img">
							<image :src="goodsImg(item.goods_image)" mode="aspectFill" @error="imgError(index)"
								:lazy-load="true"></image>
							<view class="goods-tag"
								:style="{'background': 'url(' + bgImg + ') no-repeat', 'backgroundSize': 'cover'}"
								v-if="value.goodsTag == 'default' && goodsTag(item) != ''">{{ goodsTag(item) }}</view>
							<view class="goods-tag-img" v-if="value.goodsTag == 'diy'">
								<image :src="$util.img(value.tagImg.imageUrl)" mode=""></image>
							</view>
							<view class="bg"></view>
							<view v-if="value.isShowGoodSaleNum" class="num">
								已售{{ item.sale_num }}{{ item.unit ? item.unit : '件' }}</view>
						</view>
						<view class="info-wrap">
							<view class="name-wrap">
								<view class="goods-name">{{ item.goods_name }}</view>
							</view>

							<view class="label">
								<view v-if="item.is_free_shipping == 1">包邮</view>
								<view
									v-if="item.promotion_type == 1 && (!item.member_price || item.member_price != showPrice(item) )">
									限时折扣</view>
							</view>

							<view class="pro-info">
								<view class="lineheight-clear">
									<view class="discount-price">
										<text
											class="unit color-base-text font-size-tag">{{ $lang('common.currencySymbol') }}</text>
										<text
											class="price color-base-text font-size-toolbar">{{ showPrice(item) }}</text>
									</view>
									<view class="member-price-tag"
										v-if="item.member_price && item.member_price == showPrice(item)">
										<image :src="$util.img('upload/uniapp/goods/vip.png')" mode="widthFix"></image>
									</view>
								</view>

								<!-- <view class="sale font-size-activity-tag color-tip">已售{{ item.sale_num }}{{ item.unit ? item.unit : '件' }}</view> -->
							</view>

							<view class="delete-price font-size-activity-tag color-tip">
								<block>
									<text class="unit">{{ $lang('common.currencySymbol') }}</text>
									{{ item.market_price > 0 ? item.market_price : item.price }}
								</block>
							</view>

							<!-- <view class="btn color-base-bg"><text class="iconfont icongouwuche3"></text></view> -->
						</view>
					</view>
				</view>
			</view>
		</template>


		<template v-if="styleValue == 5">
			<view class="goods-list-5" :data-theme="themeStyle"
				:style="{ backgroundColor: value.backgroundColor, marginTop: value.marginTop * 2 + 'rpx' }">
				<view class="marketing-wrap" v-show="goodsList.length > 0">
					<view class="bgselect-image">
						<image :src="$util.img('/upload/uniapp/bargain/' + value.bgSelect + '.png')" mode="widthFix">
						</image>
					</view>
					<view class="marketimg-box">
						<view class="marketimg-box-title">
							<view class="marketimg-box-title-left">
								<image v-if="value.list.imageUrl" :src="$util.img(value.list.imageUrl)" mode="widthFix">
								</image>
								<text>{{ value.list.title }}</text>
							</view>

							<view class="marketimg-box-title-right" :class="value.bgSelect"
								@click="$util.diyRedirectTo(value.listMore)">
								<text>查看更多</text>
								<text class="iconfont iconright"></text>
							</view>
						</view>
						<view class="marketimg-box-con" v-if="value.changeType == 1">
							<scroll-view class="marketimg-box-con-scroll" :scroll-x="true" :show-scrollbar="false">
								<view class="marketimg-box-con-item" v-for="(item, index) in goodsList" :key="index"
									@click="toDetail(item)">
									<view class="wrap">
										<view class="img-box">
											<image :src="goodsImg(item.goods_image)" mode="aspectFit"
												@error="imgError(index)"></image>
											<!-- <image :src="$util.img(item.goods_image, { size: 'mid' })" mode="aspectFit" @error="imgError(index)"></image> -->
										</view>
										<view class="content">
											<view class="title">{{ item.goods_name }}</view>
											<view class="price-box color-base-text">
												￥
												<text class="original-price">{{ item.price }}</text>
											</view>
											<!-- <view class="num">已购{{ item.sale_num }}件</view> -->
										</view>
									</view>
								</view>
							</scroll-view>
						</view>

						<view class="marketimg-box-con" v-if="value.changeType == 2">
							<swiper class="marketimg-swiper" style="height: 280rpx;" :autoplay="false">
								<swiper-item class="swiper-item" v-for="page in Math.ceil(goodsList.length / 3)">
									<view class="item" style="overflow: hidden;">
										<!-- #ifdef MP-WEIXIN -->
										<block v-for="(item, index) in goodsList" :key="index"
											v-if="index < (page + 1) * 3 && index >= page * 3">
											<view class="marketimg-box-con-item marketimg-box-con-item_two"
												@click="toDetail(item)"
												v-show="3 * (page - 1) <= index && index < 3 * (page - 1) + 3">
												<view class="img-box">
													<image :src="goodsImg(item.goods_image)" mode="aspectFit"
														@error="imgError(index)"></image>
													<!-- <image :src="$util.img(item.goods_image, { size: 'mid' })" mode="aspectFit" @error="imgError(index)"></image> -->
												</view>
												<view class="content">
													<view class="title">{{ item.goods_name }}</view>
													<view class="price-box color-base-text">
														￥
														<text class="original-price">{{ item.price }}</text>
													</view>
													<!-- <view class="num">已购{{ item.cut_num }}件</view> -->
												</view>
											</view>
										</block>
										<!-- #endif -->
										<!-- #ifndef MP-WEIXIN -->
										<block v-for="(item, index) in goodsList" :key="index"
											v-if="index < page * 3 && index >= (page - 1) * 3">
											<view class="marketimg-box-con-item marketimg-box-con-item_two"
												@click="toDetail(item)"
												v-show="3 * (page - 1) <= index && index < 3 * (page - 1) + 3">
												<view class="img-box">
													<image :src="goodsImg(item.goods_image)" mode="aspectFit"
														@error="imgError(index)"></image>
													<!-- <image :src="$util.img(item.goods_image, { size: 'mid' })" mode="aspectFit" @error="imgError(index)"></image> -->
												</view>
												<view class="content">
													<view class="title">{{ item.goods_name }}</view>
													<view class="price-box color-base-text">
														￥
														<text class="original-price">{{ item.price }}</text>
													</view>
													<!-- <view class="num">已购{{ item.cut_num }}件</view> -->
												</view>
											</view>
										</block>
										<!-- #endif -->
									</view>
								</swiper-item>
							</swiper>
						</view>
					</view>
				</view>
			</view>
		</template>

		<!-- 新增：瀑布流布局（style=6） -->
		<template v-if="styleValue == 6" class="tn-flex">
			<view class="goods-list waterfall-layout" :data-theme="themeStyle"
				:style="{ backgroundColor: value.backgroundColor, marginTop: value.marginTop * 2 + 'rpx', padding: '0 15rpx' }">
				<!-- 左列 -->
				<view class="waterfall-column">
					<view class="goods-item" v-for="(item, index) in leftList" :key="index" @click="toDetail(item)">
						<view class="goods-img">
							<!-- 监听图片加载，更新列高度 -->
							<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)"
								@load="onImgLoad(index, 'left')" :lazy-load="true"></image>
							<!-- 原标签逻辑复用 -->
							<view class="color-base-bg goods-tag"
								v-if="value.goodsTag == 'default' && goodsTag(item) != ''">{{ goodsTag(item) }}</view>
							<view class="goods-tag-img" v-if="value.goodsTag == 'diy'">
								<image :src="$util.img(value.tagImg.imageUrl)" mode=""></image>
							</view>
						</view>
						<view class="info-wrap">
							<view class="name-wrap">
								<view class="goods-name">{{ item.goods_name }}</view>
							</view>
							<view class="pro-info">
								<view class="delete-price font-size-activity-tag color-tip">
									<text class="unit">{{ $lang('common.currencySymbol') }}</text>
									{{ item.market_price > 0 ? item.market_price : item.price }}
								</view>
							</view>
							<view class="lineheight-clear">
								<view class="discount-price">
									<text
										class="unit color-base-text font-size-tag">{{ $lang('common.currencySymbol') }}</text>
									<text class="price color-base-text font-size-toolbar">{{ showPrice(item) }}</text>
								</view>
								<view class="member-price-tag"
									v-if="item.member_price && item.member_price == showPrice(item)">
									<image :src="$util.img('upload/uniapp/index/VIP.png')" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 右列 -->
				<view class="waterfall-column">
					<view class="goods-item" v-for="(item, index) in rightList" :key="index" @click="toDetail(item)">
						<!-- 内容与左列完全一致，复用逻辑 -->
						<view class="goods-img">
							<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)"
								@load="onImgLoad(index, 'right')" :lazy-load="true"></image>
							<view class="color-base-bg goods-tag"
								v-if="value.goodsTag == 'default' && goodsTag(item) != ''">{{ goodsTag(item) }}</view>
							<view class="goods-tag-img" v-if="value.goodsTag == 'diy'">
								<image :src="$util.img(value.tagImg.imageUrl)" mode=""></image>
							</view>
						</view>
						<view class="info-wrap">
							<!-- 原info-wrap内容不变，省略... -->
							<view class="name-wrap">
								<view class="goods-name">{{ item.goods_name }}</view>
							</view>
							<view class="pro-info">
								<view class="delete-price font-size-activity-tag color-tip">
									<text class="unit">{{ $lang('common.currencySymbol') }}</text>
									{{ item.market_price > 0 ? item.market_price : item.price }}
								</view>
							</view>
							<view class="lineheight-clear">
								<view class="discount-price">
									<text
										class="unit color-base-text font-size-tag">{{ $lang('common.currencySymbol') }}</text>
									<text class="price color-base-text font-size-toolbar">{{ showPrice(item) }}</text>
								</view>
								<view class="member-price-tag"
									v-if="item.member_price && item.member_price == showPrice(item)">
									<image :src="$util.img('upload/uniapp/index/VIP.png')" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import globalConfig from '@/common/js/golbalConfig.js';
    import eventBus from '@/common/js/eventBus.js'
	export default {
		name: 'diy-goods-list',
		props: {
			value: {
				type: Object,
				default: () => {
					return {};
				}
			},
			diyData: {},
			siteId: {
				type: [Number, String],
				default: 0
			},
			name: {
				type: String,
				default () {
					return '';
				}
			},
			isLastGoodsList: {
				type: Boolean,
				default: false, // 设置默认值，避免 undefined
				required: false
			},
			isLastGoodsId: {
				type: [Number],
				default: 0
			}
		},
		mixins: [globalConfig],
		data() {
			return {
				goodsList: [],
				morepage: 1,
				showPage: 1,
				goodsValue: {},
				styleValue: 0,
				// 新增：瀑布流相关数据
				leftList: [], // 瀑布流左列商品
				rightList: [], // 瀑布流右列商品
				columnHeights: [0, 0],
				isNoData: false,
			};
		},
        
		created() {
			this.goodsValue = this.value;
			this.styleValue = this.value.style;
			eventBus.$on('getMoreGoods', () => {
				if (this.isLastGoodsList){
					this.getMoreGoods();
				}
			});
			eventBus.$on('resetNodata', () => {
				this.isNoData = false;
				this.morepage = 1;
			});
			if (this.diyData) {
				this.diyData.value.forEach((v, k) => {
					if (this.goodsValue.groupTitle == v.title && v.controller == "ManyGoodsList") {
						this.goodsValue.sources = v.list[0].sources;
						this.goodsValue.categoryId = v.list[0].categoryId;
						this.goodsValue.categoryName = v.list[0].categoryName;
						this.goodsValue.goodsId = v.list[0].goodsId;
					}
				})
			}
			this.getGoodsList();
		},
		computed: {
			bgImg() {
				var str = this.$util.img('upload/uniapp/goods/hot.png');
				return str
			},
			goodsGroupChange() {
				return this.$store.state.isGoodsGroupChange;
			}
		},
		watch: {
			value: {
				handler(val) {
					this.getGoodsList();
				},
				deep: true
			},
			goodsGroupChange(val) {
				var groupTitle = this.$store.state.groupTitle;

				if (this.diyData) {
					this.diyData.value.forEach((v, k) => {
						if (v.controller == "ManyGoodsList" && v.title == groupTitle && this.goodsValue
							.groupTitle == groupTitle) {
							this.goodsValue.sources = v.list[val].sources;
							this.goodsValue.categoryId = v.list[val].categoryId;
							this.goodsValue.categoryName = v.list[val].categoryName;
							this.goodsValue.goodsId = v.list[val].goodsId;
						}
					})
				}
				this.getGoodsList();
			}
		},
		methods: {
			getGoodsList() {

				var data = {
					page: 1,
					page_size: this.goodsValue.goodsCount
				};

				if (this.name == 'DIY_VIEW_CITY_INDEX' && this.siteId) data.website_id = this.siteId;
				else data.site_id = this.siteId;

				if (this.goodsValue.sources == 'category') {
					data.category_id = this.goodsValue.categoryId;
					data.category_level = 1;
				} else if (this.goodsValue.sources == 'diy') {
					data.page_size = 10;
					data.goods_id_arr = this.goodsValue.goodsId.toString();
				} else if (this.goodsValue.sources == 'group') {
					data.group_title = this.goodsValue.groupTitle;
				}
				this.$api.sendRequest({
					url: '/api/goodssku/pagecomponents',
					data: data,
					success: res => {
						if (res.code == 0 && res.data) {
							let data = res.data;
							this.goodsList = data.list;
							if (this.goodsValue.style == 6) {
								this.initWaterfallData();
								this.assignGoodsToColumns();
							}
						}
					}
				});
			},
			
			
			getMoreGoods(){
				this.morepage++;
				var data = {
					page: this.morepage,
					page_size: this.goodsValue.goodsCount
				};
				
				if (this.name == 'DIY_VIEW_CITY_INDEX' && this.siteId) data.website_id = this.siteId;
				else data.site_id = this.siteId;
				
				if (this.goodsValue.sources == 'category') {
					data.category_id = this.goodsValue.categoryId;
					data.category_level = 1;
				} else if (this.goodsValue.sources == 'diy') {
					data.page_size = 10;
					data.goods_id_arr = this.goodsValue.goodsId.toString();
				} else if (this.goodsValue.sources == 'group') {
					data.group_title = this.goodsValue.groupTitle;
				}
				this.$api.sendRequest({
					url: '/api/goodssku/pagecomponents',
					data: data,
					success: res => {
						if (res.code == 0 && res.data) {
							let data = res.data;
							if (data.list.length > 0){
								this.goodsList = this.goodsList.concat(data.list);
								if (this.goodsValue.style == 6) {
									this.initWaterfallData();
									this.assignGoodsToColumns();
								}
							}else{
								//this.goodsList = this.goodsList.concat(this.goodsList);
								this.isNoData = true;
							}
						}
					}
				});
			},

			// 2. 新增：初始化瀑布流数据（重置列和高度）
			initWaterfallData() {
				this.leftList = [];
				this.rightList = [];
				this.columnHeights = [0, 0]; // 重置为初始高度
			},

			// 3. 新增：核心方法——将商品分配到高度较小的列
			assignGoodsToColumns() {
				if (!this.goodsList.length) return;

				this.goodsList.forEach((item, index) => {
					// 预估商品高度（初始用默认值，图片加载后会更新）
					// 若后台返回图片宽高，可通过宽高比计算真实高度（更精准）
					const itemHeight = this.estimateItemHeight(item);

					// 比较两列高度，选择较矮的列
					if (this.columnHeights[0] <= this.columnHeights[1]) {
						this.leftList.push(item);
						this.columnHeights[0] += itemHeight; // 更新左列高度
					} else {
						this.rightList.push(item);
						this.columnHeights[1] += itemHeight; // 更新右列高度
					}
				});
			},

			// 4. 新增：预估商品高度（避免初始布局错乱）
			estimateItemHeight(item) {
				// 逻辑：图片高度（默认200rpx）+ 标题高度（2行，约68rpx）+ 价格区高度（约80rpx）+ 间距
				return 200 + 68 + 80 + 30; // 单位：rpx，可根据实际样式调整
			},

			// 5. 新增：图片加载完成后，更新列高度（关键：修正初始预估误差）
			onImgLoad(index, columnType) {
				// columnType: 'left'/'right'，标记图片属于哪一列
				const columnIndex = columnType === 'left' ? 0 : 1;
				const list = columnType === 'left' ? this.leftList : this.rightList;
				const item = list[index];

				// #ifdef MP-WEIXIN
				// wx.getImageInfo({
				// 	src: this.goodsImg(item.goods_image),
				// 	success(res) {
				// 		console.log(res.width)
				// 		console.log(res.height)
				// 		// const containerWidth = uni.getSystemInfoSync().windowWidth / 2 - 30; // 两列宽度（减间距）
				// 		// const imgRealHeight = (containerWidth / res.width) * res.height; // rpx需转px计算，再转回rpx
				// 		// const imgRealHeightRpx = uni.upx2px(imgRealHeight) * 2; // 转rpx

				// 		// // 重新计算当前商品的真实高度
				// 		// const realItemHeight = imgRealHeightRpx + 68 + 80 + 30; // 图片真实高度 + 标题 + 价格 + 间距

				// 		// // 更新列高度（修正预估误差）
				// 		// this.columnHeights[columnIndex] = this.columnHeights[columnIndex] - this
				// 		// 	.estimateItemHeight(item) +
				// 		// 	realItemHeight;

				// 		// // 强制更新视图（解决UniApp数据更新不触发DOM的问题）
				// 		// this.$forceUpdate();
				// 	}
				// });
				// #endif
				// #ifndef MP-WEIXIN
				var image = new Image();
				image.src = this.goodsImg(item.goods_image);
				image.onload = () => {
					// 计算图片真实高度（基于容器宽度100%，保持宽高比）
					const containerWidth = uni.getSystemInfoSync().windowWidth / 2 - 30; // 两列宽度（减间距）
					const imgRealHeight = (containerWidth / image.width) * image.height; // rpx需转px计算，再转回rpx
					const imgRealHeightRpx = uni.upx2px(imgRealHeight) * 2; // 转rpx

					// 重新计算当前商品的真实高度
					const realItemHeight = imgRealHeightRpx + 68 + 80 + 30; // 图片真实高度 + 标题 + 价格 + 间距

					// 更新列高度（修正预估误差）
					this.columnHeights[columnIndex] = this.columnHeights[columnIndex] - this.estimateItemHeight(item) +
						realItemHeight;

					// 强制更新视图（解决UniApp数据更新不触发DOM的问题）
					this.$forceUpdate();
				};
				// #endif



				//             var image = new Image();
				// image.src = this.goodsImg(item.goods_image);
				// image.onload = () => {
				// 	// 计算图片真实高度（基于容器宽度100%，保持宽高比）
				// 	const containerWidth = uni.getSystemInfoSync().windowWidth / 2 - 30; // 两列宽度（减间距）
				// 	const imgRealHeight = (containerWidth / image.width) * image.height; // rpx需转px计算，再转回rpx
				// 	const imgRealHeightRpx = uni.upx2px(imgRealHeight) * 2; // 转rpx

				// 	// 重新计算当前商品的真实高度
				// 	const realItemHeight = imgRealHeightRpx + 68 + 80 + 30; // 图片真实高度 + 标题 + 价格 + 间距

				// 	// 更新列高度（修正预估误差）
				// 	this.columnHeights[columnIndex] = this.columnHeights[columnIndex] - this.estimateItemHeight(item) +
				// 		realItemHeight;

				// 	// 强制更新视图（解决UniApp数据更新不触发DOM的问题）
				// 	this.$forceUpdate();
				// };
			},


			toDetail(item) {
				this.$util.redirectTo('/pages/goods/detail/detail', {
					sku_id: item.sku_id
				});
			},
			goodsImg(imgStr) {
				let imgs = imgStr.split(',');
				return imgs[0] ? this.$util.img(imgs[0], {
					size: 'mid'
				}) : this.$util.getDefaultImage().default_goods_img;
			},
			imgError(index) {
				this.goodsList[index].goods_image = this.$util.getDefaultImage().default_goods_img;
			},
			showPrice(data) {
				let price = data.discount_price;
				if (data.member_price && parseFloat(data.member_price) < parseFloat(price)) price = data.member_price;
				return price;
			},
			goodsTag(data) {
				switch (data.recommend_way) {
					case 1:
						return '新品';
						break;
					case 2:
						return '精品';
						break;
					case 3:
						return '推荐';
						break;
					default:
						return '';
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.lineheight-clear {
		line-height: 1 !important;
	}

	// 商品列表单列样式
	.goods-list.single-column {
		.goods-item {
			padding: 26rpx;
			background: #fff;
			border-radius: $border-radius;
			display: flex;
			position: relative;
			margin-top: 10rpx;

			&.first-child {
				margin-top: 0;
			}

			.goods-img {
				width: 200rpx;
				height: 200rpx;
				overflow: hidden;
				border-radius: $border-radius;
				margin-right: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.goods-tag {
				color: #fff;
				line-height: 1;
				padding: 8rpx 12rpx;
				position: absolute;
				border-top-left-radius: $border-radius;
				border-bottom-right-radius: $border-radius;
				top: 26rpx;
				left: 26rpx;
				font-size: $font-size-goods-tag;
			}

			.goods-tag-img {
				position: absolute;
				border-top-left-radius: $border-radius;
				width: 80rpx;
				height: 80rpx;
				top: 26rpx;
				left: 26rpx;
				z-index: 5;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.info-wrap {
				flex: 1;
				display: flex;
				flex-direction: column;
			}

			.name-wrap {
				flex: 1;
			}

			.goods-name {
				font-size: $font-size-base;
				line-height: 1.3;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				height: 68rpx;
			}

			.introduction {
				line-height: 1;
				margin-top: 10rpx;
			}

			.discount-price {
				display: inline-block;
				font-weight: bold;
				line-height: 1;
				margin-top: 16rpx;

				.unit {
					margin-right: 6rpx;
				}
			}

			.pro-info {
				display: flex;
				margin-top: 16rpx;

				.delete-price {
					text-decoration: line-through;
					flex: 1;

					.unit {
						margin-right: 6rpx;
					}
				}

				&>view {
					line-height: 1;

					&:nth-child(2) {
						text-align: right;
					}
				}
			}

			.member-price-tag {
				display: inline-block;
				width: 60rpx;
				line-height: 1;
				margin-left: 6rpx;

				image {
					width: 100%;
				}
			}
		}
	}

	// 商品列表双列样式
	.goods-list.double-column {
		display: flex;
		flex-wrap: wrap;
		// margin: 0 $margin-both;

		.goods-item {
			flex: 1;
			position: relative;
			background-color: #fff;
			flex-basis: 48%;
			max-width: calc((100% - 30rpx) / 2);
			margin-right: $margin-both;
			margin-bottom: $margin-updown;
			border-radius: $border-radius;

			&:nth-child(2n) {
				margin-right: 0;
			}

			.goods-img {
				position: relative;
				overflow: hidden;
				padding-top: 100%;
				border-top-left-radius: $border-radius;
				border-top-right-radius: $border-radius;

				image {
					width: 100%;
					position: absolute;
					top: 50%;
					left: 0;
					transform: translateY(-50%);
				}
			}

			.goods-tag {
				color: #fff;
				line-height: 1;
				padding: 8rpx 16rpx;
				position: absolute;
				border-bottom-right-radius: $border-radius;
				top: 0;
				left: 0;
				font-size: $font-size-goods-tag;
			}

			.goods-tag-img {
				position: absolute;
				border-top-left-radius: $border-radius;
				width: 80rpx;
				height: 80rpx;
				top: 0;
				left: 0;
				z-index: 5;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.info-wrap {
				padding: 0 26rpx 26rpx 26rpx;
			}

			.goods-name {
				font-size: $font-size-base;
				line-height: 1.3;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				margin-top: 20rpx;
				height: 68rpx;
			}

			.discount-price {
				display: inline-block;
				font-weight: bold;
				line-height: 1;
				margin-top: 16rpx;

				.unit {
					margin-right: 6rpx;
				}
			}

			.pro-info {
				display: flex;
				margin-top: 16rpx;

				.delete-price {
					text-decoration: line-through;
					flex: 1;

					.unit {
						margin-right: 6rpx;
					}
				}

				&>view {
					line-height: 1;

					&:nth-child(2) {
						text-align: right;
					}
				}
			}

			.member-price-tag {
				display: inline-block;
				width: 60rpx;
				line-height: 1;
				margin-left: 6rpx;

				image {
					width: 100%;
				}
			}
		}
	}

	// 风格三
	.goods-list-3 {
		.goods-item {
			width: 100%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			overflow: hidden;
			margin-top: 20rpx;

			&:first-child {
				margin-top: 0;
			}

			.goods-img {
				width: 100%;
				height: 330rpx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}

				.goods-tag {
					width: 74rpx;
					height: 74rpx;
					position: absolute;
					top: 10rpx;
					left: 10rpx;
					line-height: 74rpx;
					text-align: center;
					color: #FFFFFF;
					font-size: 22rpx;
				}

				.goods-tag-img {
					position: absolute;
					border-top-left-radius: $border-radius;
					width: 80rpx;
					height: 80rpx;
					top: 26rpx;
					left: 26rpx;
					z-index: 5;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.bg {
					width: 100%;
					height: 104rpx;
					position: absolute;
					bottom: 0;
					left: 0;
					background: linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 100%);
				}

				.num {
					position: absolute;
					right: 30rpx;
					bottom: 20rpx;
					font-size: 20rpx;
					line-height: 1;
					color: #FFFFFF;
				}
			}

			.info-wrap {
				padding: 0 24rpx 36rpx;
				position: relative;

				.name-wrap {
					height: 80rpx;
					margin-top: 16rpx;

					.goods-name {
						font-size: $font-size-base;
						line-height: 40rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}

				.pro-info {
					display: flex;
					align-items: flex-end;
					margin-top: 15rpx;
				}

				.lineheight-clear {
					margin-right: 20rpx;
					display: flex;
					align-items: center;
					line-height: 1;

					.discount-price {
						line-height: 1;
						font-weight: bold;
					}

					.member-price-tag {
						width: 44rpx;
						height: 24rpx;
						margin-left: 10rpx;
					}
				}

				.delete-price {
					text-decoration: line-through;
					line-height: 1;
				}

				.label {
					display: flex;
					align-items: center;
					margin-top: 20rpx;

					view {
						height: 28rpx;
						font-size: 20rpx;
						line-height: 26rpx;
						border: 1rpx solid #FF4544;
						border-radius: 6rpx;
						color: #FF4544;
						margin-right: 10rpx;
						padding: 0 7rpx;
					}
				}

				.btn {
					width: 160rpx;
					height: 50rpx;
					border-radius: 25rpx;
					text-align: center;
					line-height: 50rpx;
					color: #FFFFFF;
					position: absolute;
					right: 24rpx;
					bottom: 36rpx;
					padding: 0;
					margin: 0;
				}

				.member-price-tag {
					display: inline-block;
					width: 60rpx;
					line-height: 1;
					margin-left: 6rpx;

					image {
						width: 100%;
					}
				}
			}
		}
	}

	.goods-list-4 {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.goods-item {
			width: 330rpx;

			&:nth-child(-n+2) {
				margin-top: 0;
			}

			.info-wrap {
				.delete-price {
					margin-top: 20rpx;
				}

				.btn {
					width: 50rpx;

					text {
						font-size: 26rpx;
					}
				}

				.member-price-tag {
					display: inline-block;
					width: 60rpx;
					line-height: 1;
					margin-left: 6rpx;

					image {
						width: 100%;
					}
				}
			}
		}
	}

	// 风格五
	/deep/.uni-scroll-view ::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none;
		width: 0;
		height: 0;
		color: transparent;
		background: transparent;
	}

	/deep/::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
		background: transparent;
	}

	scroll-view ::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
	}

	.goods-list-5 {
		// padding: 0 30rpx;

		.marketing-wrap {
			background-color: #ffffff;
			border-radius: 10rpx;
			overflow: hidden;
			box-sizing: border-box;
			position: relative;

			.bgselect-image {
				width: 100%;
				position: absolute;
				top: 0;
				z-index: 1;

				>image {
					width: 100%;
				}
			}

			.marketimg-box {
				padding: 30rpx 0;
				position: relative;
				z-index: 2;

				.marketimg-box-title {
					display: flex;
					height: 32rpx;
					line-height: 32rpx;
					align-items: center;
					justify-content: space-between;
					padding: 0 30rpx;

					.marketimg-box-title-left {
						display: flex;
						align-items: center;
						line-height: 32rpx;

						image {
							width: 126rpx;
							margin-right: 20rpx;
						}

						text {
							color: #909399;
						}
					}

					.marketimg-box-title-right {
						display: flex;
						align-items: center;

						text {
							font-size: 24rpx;
						}

						&.red text {
							background: linear-gradient(-55deg, #ff5151 0%, #ff7b91 100%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}

						&.blue text {
							background: linear-gradient(-55deg, #0ecfd3 0%, #12d0ae 100%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}

						&.yellow text {
							background: linear-gradient(-55deg, #feb632 0%, #fe6232 100%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}

						&.violet text {
							background: linear-gradient(-55deg, #627bfd 0%, #8662fd 100%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}
					}
				}
			}

			.marketimg-box-con {
				width: 100%;
				margin-top: 30rpx;
				// padding: 0 20rpx;
				// box-sizing: border-box;

				.marketimg-box-con-scroll {
					width: calc(100% - 30rpx);
					margin: 0 10rpx 0 20rpx;
					line-height: 1;
					white-space: nowrap;
				}

				.marketimg-box-con-item {
					display: inline-block;
					width: 33.333%;

					&.marketimg-box-con-item_two {
						width: calc((100% - 40rpx) / 3);
					}

					.wrap {
						margin: 0 20rpx 0 10rpx;
					}

					.img-box {
						width: 188rpx;
						height: 188rpx;
					}

					image {
						width: 188rpx;
						height: 188rpx;
						border-radius: 10rpx;
					}

					.content {
						.title {
							font-size: $font-size-base;
							line-height: $font-size-base;
							margin-top: 20rpx;
							width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.price-box {
							font-size: $font-size-tag;
							font-weight: 600;
							height: 32rpx;
							line-height: 32rpx;
							margin-top: 20rpx;

							text {
								font-size: 32rpx;
							}
						}

						.num {
							font-size: 20rpx;
							line-height: 20rpx;
							color: #909399;
							margin-top: 20rpx;
						}
					}
				}

				.marketimg-swiper {
					width: 100%;

					.swiper-item {
						padding: 0 30rpx;
						box-sizing: border-box;
					}

					.marketimg-box-con-item {
						margin-right: 20rpx;

						&:nth-child(3n + 3) {
							margin-right: 0;
						}
					}
				}
			}
		}
	}

	// 新增：瀑布流布局样式
	.goods-list.waterfall-layout {
		display: flex;
		gap: 20rpx; // 两列间距
		padding: 20rpx 0;

		// 瀑布流列容器
		.waterfall-column {
			flex: 1; // 两列等宽
		}

		// 瀑布流商品项（关键：取消固定高度，自适应内容）
		.goods-item {
			background: #fff;
			border-radius: $border-radius;
			margin-bottom: 20rpx; // 商品项上下间距
			overflow: hidden;

			// 商品图片（宽度100%，高度自适应）
			.goods-img {
				width: 100%;
				padding: 0;
				margin: 0;

				image {
					width: 100%;
					height: auto; // 关键：取消固定高度，按比例自适应
				}

				// 标签位置调整（适配自适应高度）
				.goods-tag {
					top: 0;
					left: 0;
					border-top-left-radius: $border-radius;
					border-bottom-right-radius: $border-radius;
				}

				.goods-tag-img {
					top: 0;
					left: 0;
				}
			}

			// 商品信息区（自适应高度）
			.info-wrap {
				padding: 20rpx;

				.goods-name {
					// 保留2行省略，高度自适应
					height: auto;
					min-height: 68rpx;
				}

				.pro-info {
					margin-top: 10rpx;
				}

				.discount-price {
					margin-top: 10rpx;
				}
			}
		}
	}
</style>